<template>
	<view>

		<view class="margin-xs bg-white radius margin-bottom-xl" style="padding: 10rpx 0px;" v-if="ketangData">
			<view class="font-23 juzhong">{{ketangData.customerModel.student.name}}</view>

			<view v-for="(item,index) in ketangData.lessonPreparationRecordsModelList"
				@click="xuanzelessonPIndex(index)" class="" style="font-size: 40rpx;"
				:class="{'active1':lessonPIndex==index,'padding-sm margin-sm lessonPreparationRecordsModelList radius':true}">
				<view style="font-size: 28rpx;">{{item.title}} <text class="font-13 margin-left-sm"
						v-for="item2 in JSON.parse(item.jtcs)">
						{{item2}}
					</text>
				</view>

			</view>

			<view v-if="ketangData.lessonPreparationRecordsModelList[lessonPIndex].from!=null">

				<view style="display: flex;flex-wrap: wrap;margin: 10rpx 20rpx;" class="">
					<view v-for="(item,index) in ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.tjlist"
						:class="{'fromListitem' :true, 'active2':fromListIndex==index}" @click="fromListIndex=index">
						{{ index + 1 }}
					</view>
				</view>

				<view class="margin-sm radius">
					<view class="container">
						<transition name="slide">
							<div :key="fromListIndex" class="content"
								style="border:#ccc 1px solid;padding: 1px;border-radius: 5px;padding-bottom: 20rpx;">
								<!-- {{ ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.tjlist[fromListIndex]}} -->
								<!-- 强化物 -->
								<view class="margin-top-sm">
									<selectInput :list="qianghuawuList" @change="selectInputChange" cursor-spacing="300"
										:data="ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.tjlist[fromListIndex].q">
									</selectInput>
								</view>

								<view style="display: flex;">
									<view style="flex: 1;">
										<view style="flex: 1;" @click="setType(1)"
											:class="{'juzhong padding-sm margin-sm bg-green radius':true}">
											合格 +
											<view
												v-if="ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.tjlist[fromListIndex].t == 1">
												<uni-icons type="circle-filled" size="20" style="margin-left: 20rpx;"
													color="#fff"></uni-icons>


											</view>
										</view>
										<view style="flex: 1;display: flex;background-color: #f3a73f;"
											@click="setType(4)" class="juzhong padding-sm margin-sm bg-green radius">
											半辅 P<view
												v-if="ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.tjlist[fromListIndex].t == 4">
												<uni-icons type="circle-filled" size="20" style="margin-left: 20rpx;"
													color="#fff"></uni-icons>

											</view>
										</view>
									</view>
									<view style="flex: 1;">
										<view style="flex: 1;display: flex;background-color: #e43d33;"
											@click="setType(2)" class="juzhong padding-sm margin-sm bg-green radius">
											不合格 -<view
												v-if="ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.tjlist[fromListIndex].t == 2">
												<uni-icons type="circle-filled" size="20" style="margin-left: 20rpx;"
													color="#fff"></uni-icons>
											</view>
										</view>

										<view style="flex: 1;display: flex;background-color: #f3a73f;"
											@click="setType(3)" class="juzhong padding-sm margin-sm bg-green radius">
											全辅导 P<view
												v-if="ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.tjlist[fromListIndex].t == 3">
												<uni-icons type="circle-filled" size="20" style="margin-left: 20rpx;"
													color="#fff"></uni-icons>
											</view>
										</view>
									</view>
								</view>

								<!-- 强化等级 -->
								<view style="display: flex;"
									v-if="ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.tjlist[fromListIndex].q!=null">
									<view style="flex: 1;margin: 20rpx;height: 80rpx;" class="bg-grey juzhong radius"
										@click="qianghuawuNumberAdd(-1)">
										<uni-icons type="left" size="30" color="#fff"></uni-icons>
									</view>
									<view style="flex: 1;margin: 20rpx;height: 80rpx;" class=" juzhong font-23">
										{{ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.tjlist[fromListIndex]
										.qN}}
									</view>
									<view style="flex: 1;margin: 20rpx;height: 80rpx;" class="bg-grey juzhong radius"
										@click="qianghuawuNumberAdd(1)">
										<uni-icons type="right" size="30" color="#fff"></uni-icons>
									</view>
								</view>


							</div>
						</transition>
					</view>
				</view>
				<view style="display: flex;" class="juzhong">
					正确率{{ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.find3}}%
				</view>
				<view class="margin-sm radius">
					<uni-easyinput v-model="ketangData.lessonPreparationRecordsModelList[lessonPIndex].from.remarks"
						placeholder="总备注"></uni-easyinput>
				</view>
			</view>


		</view>
		<view v-if="ktList.length==0" class="margin-top-sm">
			<blues-empty img="msg" text="暂无课堂">
			</blues-empty>
		</view>
		<uni-popup ref="ktListSelect" type="bottom" :isMaskClick="false">
			<view class="bg-white padding-xs radius" style="margin-bottom: -10rpx;">
				<uni-section title="课堂选择" type="circle" style="padding-bottom: 30rpx;">
					<view v-for="item in ktList" @click="selectKt(item)">
						<view class="padding-sm margin-sm bg-gradual-green radius"
							style="display: flex;  justify-content: space-between;">
							<view>
								<view class="font-23">
									{{item.createBy}}
								</view>
								<view class="font-13">
									{{item.sysTimeSlotId}}
								</view>
							</view>
							<view class="juzhong">
								<uni-icons type="right" size="30" color="white"></uni-icons>
							</view>

						</view>
						<view>

						</view>
					</view>

				</uni-section>
			</view>
		</uni-popup>
		<view style="position: fixed;bottom: 0px;">
			<view style="justify-content: space-between;display: flex;">
				<button @click="fromListAdd(-1)" style="width: 230rpx;" class=" bg-grey cu-btn lg">
					上一回合</button>
				<view style="width: 10rpx;"></view>
				<button @click="fromListAdd(1)" style="width:250rpx;" class=" cu-btn block bg-green lg  ">下一回合
					<vab-icon class="vab-icon phoneicon margin-lr-xs" :icon="['fas', 'angle-right']"
						:style="{color:'#fff'}"></vab-icon></button>
				<view style="width: 10rpx;"></view>

				<button @click="doInsertDoInsert" style="width:250rpx;" class=" cu-btn block bg-blue lg  ">保存
				</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		recentlyStudentsByorgId
	} from '@/api/lpc/tj/tj'
	import {
		getListByBeiKe
	} from "@/api/system/academicAffairsCenter/scheduleTimetable/SysScheduleTimetableManagementApi";
	import {
		doInsertDoInsert,
		getListByfind1AdnSysScheduleTimetable
	} from "@/api/lpc/courserecord/index.js";
	import {
		getOrSetJsonFileCommon
	} from "@/api/system/commonData/index.js";
	import {
		isJson,
		isNull
	} from '@/utils/validate';


	export default {
		data() {
			return {

				from: {
					remarks: "",
					tjlist: []
				},
				fromListIndex: 0,
				lessonPIndex: 0,
				ktList: [],
				ktData: null,
				ketangData: null,
				qianghuawuList: [], //强化物列表
			}
		},
		created() {
			this.getKtList()
			this.JtcsJson()

		},
		methods: {
			qianghuawuNumberAdd(i) {

				let asdf = this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from.tjlist[this
						.fromListIndex]
					.qN
				if (i == 1) {
					if (asdf >= 3) {
						return
					}
					asdf++
				}
				if (i == -1) {
					if (asdf <= 0) {
						return
					}
					asdf--
				}
				console.log(asdf);
				this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from.tjlist[this.fromListIndex]
					.qN = asdf

				this.$forceUpdate()
			},
			selectInputChange(e) {
				this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from.tjlist[this.fromListIndex]
					.q = e
				console.log(e);

				if (this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from.tjlist[this.fromListIndex]
					.q && this.qianghuawuList.indexOf(e) == -1) {
					this.qianghuawuList.push(e)
					console.log(this.qianghuawuList)
					this.JtcsJson(this.qianghuawuList)
				}
				this.$forceUpdate()
			},
			/**
			 * 具体词汇json的 新增和获取方法
			 * @param data2
			 * @returns {Promise<void>}
			 * @constructor
			 */
			async JtcsJson(data2) {
				let asdf = {}
				if (!isNull(data2)) {
					asdf = {
						data: JSON.stringify(data2),
						filename: "强化物/" + 1,
					}
				} else {
					asdf = {
						filename: "强化物/" + 1,
					}
				}
				const {
					data
				} = await getOrSetJsonFileCommon(asdf)
				console.log(data)
				if (isJson(data)) {
					this.qianghuawuList = JSON.parse(data)
				}

				return data
			},

			setType(i) {
				this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from.tjlist[this.fromListIndex].t =
					i
				let a = this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from
				const count4 = a.tjlist.filter(item => item.t === 4).length; // count = 2
				const count3 = a.tjlist.filter(item => item.t === 3).length; // count = 2
				const count1 = a.tjlist.filter(item => item.t === 1).length; // count = 2
				a.find3 = (count1) / (a.tjlist.length - count4 - count3) * 100
				a.find3 = a.find3.toFixed(0)
				this.$forceUpdate()
			},
			fromListAdd(i) {
				let a = this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from

				if (i == 1)

				{
					if (this.fromListIndex + 1 < this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from
						.tjlist
						.length) {
						this.fromListIndex++
						return
					}
					if (this.fromListIndex + 1 >= this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from
						.tjlist
						.length) {
						// this.doInsertDoInsert()
						this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from.tjlist.push({
							i: this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from.tjlist
								.length + 1,
							t: 0, //1 失败 2 通过
							q: null, //
							qN: 0,
						})
						this.fromListIndex = this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from
							.tjlist
							.length - 1;
					}

				}
				if (i == -1) {
					this.fromListIndex--
					// this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from.tjlist.splice(this
					// 	.fromListIndex, 1)
				}
				const count4 = a.tjlist.filter(item => item.t === 4).length; // count = 2
				const count3 = a.tjlist.filter(item => item.t === 3).length; // count = 2
				const count1 = a.tjlist.filter(item => item.t === 1).length; // count = 2
				a.find3 = (count1) / (a.tjlist.length - count4 - count3) * 100
				a.find3 = a.find3.toFixed(0)
			},
			async doInsertDoInsert() {
				//判断所以状态是否已选
				const foundItem = this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from.tjlist
					.find(item => item.t === 0); // foundItem = { id: 1 }
				if (foundItem) {
					this.fromListIndex = foundItem.index - 1
					uni.showToast({
						title: "第" + foundItem.index + "回合未选状态",
						icon: "none"
					})
					return
				}
				let a = Object.assign({}, this.ketangData.lessonPreparationRecordsModelList[this.lessonPIndex].from);
				//合格率 保留两位小数
				const count = a.tjlist.filter(item => item.t === 1).length; // count = 2
				a.find3 = count / a.tjlist.length * 100
				a.find3 = a.find3.toFixed(0)
				a.tjlist = JSON.stringify(a.tjlist)
				a.customerId = this.ketangData.customerId
				a.sysScheduleTimetable = this.ketangData.id
				a.offlineClassName = this.ketangData.offlineClassName
				const {
					data,
					msg
				} = await doInsertDoInsert([a])

				this.$emit("fetchData", 111);
				this.drawer = false
			},
			async xuanzelessonPIndex(i) {
				this.fromListIndex = 0
				this.lessonPIndex = i
				if (this.ketangData.lessonPreparationRecordsModelList[i].from == null) {
					this.ketangData.lessonPreparationRecordsModelList[i].from = {
						remarks: "",
						tjlist: []
					}
					this.fromListAdd(1)
				}
				console.log(this.ketangData.lessonPreparationRecordsModelList[i]);
				if (this.ketangData.lessonPreparationRecordsModelList[i].id != null) {
					const {
						data,
						msg
					} = await getListByfind1AdnSysScheduleTimetable({
						"find1": this.ketangData
							.lessonPreparationRecordsModelList[i].id,
						"sysScheduleTimetable": this.ketangData.lessonPreparationRecordsModelList[i]
							.scheduleTimetableId
					})
					if (!isNull(data) && data.length > 0) {
						this.ketangData.lessonPreparationRecordsModelList[i].from.id = data[0].id
						this.ketangData.lessonPreparationRecordsModelList[i].from.tjlist = JSON.parse(data[0]
							.findRemarks2)
						this.ketangData.lessonPreparationRecordsModelList[i].from.remarks = data[0].remarks
					}
				}
				this.ketangData.lessonPreparationRecordsModelList[i].from.beikeId = this.ketangData
					.lessonPreparationRecordsModelList[i].id
				this.ketangData.lessonPreparationRecordsModelList[i].from.ids = JSON.parse(this.ketangData
						.lessonPreparationRecordsModelList[i].beikeId)
					.toString()

				if (isJson(this.ketangData
						.lessonPreparationRecordsModelList[i].jtcs)) {
					this.ketangData.lessonPreparationRecordsModelList[i].from.findRemarks4 = JSON.parse(this.ketangData
						.lessonPreparationRecordsModelList[i].jtcs).join(',')
				}

				this.$forceUpdate()
			},
			selectKt(data) {
				this.ktData = data
				this.findPageByBeiKe()
				this.$refs.ktListSelect.close()
			},
			async getKtList() {
				let {
					data
				} = await recentlyStudentsByorgId({
					offlineClassName: "14"
				})

				if (data == null || data.length == 0) {
					uni.showModal({
						title: "无法上课",
						content: "5分钟前后无一对一课"
					})
				} else {
					this.ktList = data
					this.$refs.ktListSelect.open()
				}
			},
			async findPageByBeiKe() {
				let {
					data: {
						rows
					}
				} = await getListByBeiKe({
					pageNo: 1,
					pageSize: 100,
					createTime_ORDER: "DESC",
					id_EQ: this.ktData.id,
					xuyaoyuejihua: 1,
					ketang: 1
				})
				console.log(rows);
				if (rows.length == 0 || rows[0].lessonPreparationRecordsModelList ==
					null) {
					uni.showModal({
						title: "无法上课",
						content: "无备课数据，请先备课"
					})
				} else {
					this.ketangData = rows[0]
					this.xuanzelessonPIndex(0)
				}

			}
		}
	}
</script>

<style>
	.lessonPreparationRecordsModelList {
		border: #2979ff 1px solid;
		color: #2979ff;
	}

	.active1 {
		background-color: #2979ff;
		position: relative;
		color: #fff;
	}

	.active1::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 10px;
		width: 30rpx;
		/* 内部图标宽度 */
		height: 30rpx;
		/* 内部图标高度 */
		background-color: white;
		/* 内部图标颜色 */
		border-radius: 50%;
		/* 圆形 */
		transform: translate(-50%, -50%);
		/* 居中 */
	}

	.active3 {
		position: absolute;
	}

	.active3::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 10px;
		width: 30rpx;
		/* 内部图标宽度 */
		height: 30rpx;
		/* 内部图标高度 */
		background-color: #000;
		/* 内部图标颜色 */
		border-radius: 50%;
		/* 圆形 */
		transform: translate(-50%, -50%);
		/* 居中 */
	}

	.fromListitem {
		width: 50rpx;
		height: 50rpx;
		/* line-height: 50rpx; */
		text-align: center;
		border-radius: 50%;
		margin: 8rpx;
		padding: 10rpx;

		border: #67C23A 1px solid;
		color: #67C23A;
		cursor: pointer
	}



	.active2 {
		background-color: #67C23A;
		color: #fff;
		position: relative;
	}


	.container {
		position: relative;
		/* width: 200px; */
		/* padding: 20px 20px; */
		/* 容器宽度 */
		height: 500rpx;
		/* 容器高度 */
		overflow: hidden;
		/* 隐藏超出部分 */
	}

	.content {
		position: absolute;
		width: 98%;
		/* background-color: #13bec1; */
		/* height: 100%; */
		transition: transform 0.5s ease;
		/* 动画效果 */
	}

	.slide-enter-active,
	.slide-leave-active {
		transition: transform 0.5s ease;
	}

	.slide-enter {
		transform: translateX(100%);
		/* 从右侧进入 */
	}

	.slide-leave-to {
		transform: translateX(-100%);
		/* 向左移动 */
	}
</style>